<template>
	<view class="box-c page">
		<!-- 状态栏 -->
		<!-- <stateBar :shopName="shopName" :addressName="addressName"></stateBar> -->
		<!-- 分类栏 -->
		<view class="box list2">
			<view class="box category-scroll">
				<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0">
					<view class="scroll-view-item_H mx-2" v-for="(item,index) in categoryList">{{item}}</view>

				</scroll-view>
			</view>

			<view class="box d-ai-c category-icon box d-jc-c">
				<text class="iconfont iconleibie"></text>
			</view>
		</view>
		<!-- 活动列表 -->
		<view class="list-3 box mt-1 box-c">
			<scroll-view :style="{height:height+'px'}" scroll-y refresher-default-style='white'
				:refresher-threshold="45" :refresher-enabled="true" :refresher-triggered="refresherTriggered"
				@refresherrefresh="refresherrefresh" @refresherrestore="refresherrestore"
				@refresherabort="refresherabort">

				<view @tap='handleAcivityInfo' class="box activity mb-2 p-2" v-for="i in 44">
					<view class="">
						<image src="../../static/images/bg.jpg" mode="scaleToFill"></image>
					</view>
					<view class="ml-1 box-c">
						<text class="title flex-1 text-heide-2">标标题标题标题标题标标题标题标题标题标题标题标题标题标题题标题标题标题标题标题题</text>
						<view class="describe flex-1 box-c d-jc-end">
							<view class="text-heide-1">时时间时间时时时间时间时间时间时间时间时间间间时间时间时间时间间</view>
							<view class="text-heide-1">地地址地址地址地址地地址地址地址地址地址地址地址址地址地址地址址</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

	</view>
</template>

<script>
	// import stateBar from '@/components/state-bar/state-bar.vue'
	export default {
		// components: {
		// 	stateBar //这里是组件中name名称，在import引入的时候名称要一致
		// },
		data() {
			return {
				shopName: '活动中心',
				parameter: {

				},
				addressName: '',
				longitude: '',
				latitude: '',
				categoryList: [
					'全部', '文化周', '光盘行动', '互助餐厅', '公益坊', '光盘行动', '互助餐厅', '公益坊', '公益坊'

				],
				refresherTriggered: false,
				_refresherTriggered: false,
				height: '500'

			};
		},
		onLoad() {
			this.getCityBylng()
		},
		onShow() {
			//地址监听
			this.handleAdress()

		},
		onLoad(option) {
			this.getCityBylng()
		},
		onReady() {
			let that = this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					that.height = res.windowHeight - uni.upx2px(270) //windoHeight为窗口高度，主要使用的是这个

				}
			})
		},
		methods: {
			//打开详情页面
			handleAcivityInfo() {
				uni.navigateTo({
					url: 'activity-info'
				})

			},
			refresherrefresh() {
				console.log("自定义下拉刷新被触发");
				let _this = this;
				if (_this._refresherTriggered) {
					return;
				}
				_this._refresherTriggered = true;
				//界面下拉触发，triggered可能不是true，要设为true
				if (!_this.refresherTriggered) {
					_this.refresherTriggered = true;
				}
				this.loadStoreData();
			},
			refresherrestore() {
				console.log("自定义下拉刷新被复位");
				let _this = this;
				_this.refresherTriggered = false;
				_this._refresherTriggered = false;
			},
			refresherabort() {
				console.log("自定义下拉刷新被中止	");
				let _this = this;
				_this.refresherTriggered = false;
				_this._refresherTriggered = false;
			},
			loadStoreData() {
				let _this = this;
				this.listData();
				setTimeout(() => {
					_this.refresherTriggered = false; //触发onRestore，并关闭刷新图标
					_this._refresherTriggered = false;
				}, 1000)
			},
			listData() {
				let _this = this;
				//这里是调用后台接口的方法数据
			},

			//定位监听
			handleAdress() {
				uni.$on("handleAddress", res => {
					this.longitude = res.parameter.longitude
					this.latitude = res.parameter.latitude
					this.addressName = res.parameter.name
					// 清除监听
					uni.$off('handleAddress');
				})
			},
			getCityBylng() {
				let _this = this
				// permision.gotoAppPermissionSetting()
				// let flag = permision.checkSystemEnableLocation()
				let flag = true
				console.log(flag)

				if (flag) {
					//开启定位

					uni.getLocation({
						type: 'wgs84',
						success: function(res) {
							uni.request({
								url: "https://restapi.amap.com/v3/geocode/regeo",
								method: 'GET',
								data: {
									key: '6d77b7119a4fb52745394ea5590ccf52',
									location: `${res.longitude}, ${res.latitude}`
								},
								success: (data) => {
									_this.longitude = res.longitude
									_this.latitude = res.latitude
									_this.addressName = data.data.regeocode.addressComponent.city

								},
								fail(err) {
									console.log(err)
								}
							})

						},
						fail() {
							uni.showToast({
								title: "请检查位置是否开启",
								duration: 1500,
								icon: "none"
							});
							console.log("失败了")
							setTimeout(function() {
								permision.gotoAppPermissionSetting()
							}, 1000);
							_this.addressName = '定位失败'


						}
					});
				} else {
					uni.showToast({
						title: "请检查位置是否开启",
						duration: 1000,
						icon: "none"
					});
					setTimeout(function() {
						permision.gotoAppPermissionSetting()
					}, 1500);
					_this.addressName = '定位失败'
					return;
				}


			},
		}
	}
</script>

<style lang="less">

	// 分类
	.category-scroll {
		width: 90%;
	}

	.category-icon {
		width: 10%;
		color: #FF5551;
	}

	.list2 {
		background-color: #fff;
		border-bottom: solid 2rpx #F8F8F8FF;
	}

	.list-3 {

		.activity {
			background-color: #fff;
			height: 180rpx;

			.describe {
				view {
					line-height: 38rpx;
					font-size: 20rpx;
					color: #999999
				}
			}

			.title {
				line-height: 45rpx;
				font-size: 30rpx;
				font-weight: bold;
			}

			image {
				width: 280rpx;
				height: 180rpx;
				border-radius: 12rpx;
			}

		}
	}
	scroll-view ::-webkit-scrollbar {
		width: 0;
		height: 0;
		background-color: transparent;
	}

	/deep/.uni-scroll-view::-webkit-scrollbar {
		display: none
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item {
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.scroll-view-item_H {
		display: inline-block;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 28rpx;
	}
</style>
